<template>
  <slot name="slot1" />
  <slot name="slot2" />
  <slot name="slot3" />
  <div style="margin: 10px;border: 2px solid red">
    我是子组件
    <button @click="transValue" style="margin: 5px">传值给父组件</button>
  </div>
  <div style="margin: 5px;border: 2px solid gold">
    父组件传值接收区：{{ fatherMessages }}
  </div>
  <input v-model="model">

  <div>接收爷信息:{{ sharedValue }}</div>
  <button @click="sharedValue = '爷的值被修改了'">修改</button>
</template>

<script setup>
import { ref, watch } from "vue";
import { inject, provide } from 'vue';
const model = defineModel()

const prop = defineProps(['fatherMessage'])
const fatherMessages = ref(null)



const sharedValue = inject('sharedValue');



// 监听父组件 fatherMessage 值的变化
watch(() => prop.fatherMessage, (newValue) => {
  fatherMessages.value = newValue
})




// 定义所要传给父组件的值
const value = ref("我是子组件传给父组件的值")

// 使用defineEmits注册一个自定义事件
const emit = defineEmits(["getValue"])

// 点击事件触发emit，去调用我们注册的自定义事件getValue,并传递value参数至父组件
const transValue = () => {
  emit("getValue", value.value)
}

const a = 1
const b = ref(2)
defineExpose({
  a,
  b
})
</script>
